<template>
  <view class="container">
    <!-- logo -->
    <view><image class="logo" src="https://img.qumoyugo.com/webimgbg/nurse_register_logo@2x.png" /></view>
    <view class="login-title">登录</view>
    <view class="login-dash"></view>
    <view class="login-phone-title">手机号码</view>
    <view class="input-box">
      <input class="input-phone" v-model="loginData.phone" placeholder="请输入手机号" />
      <view class="input-get-code" @click="getCodeCheck()"> {{ showText }} </view>
    </view>
    <view class="input-line"></view>
    <view class="login-code-title">验证码</view>
    <view class="input-box-code">
      <input class="input-phone-code" v-model="loginData.code" placeholder="请输入验证码" />
    </view>
    <view class="input-line"></view>
    <view class="btn">
      <button class="btn-login text" @click="loginCheck()">登录</button>
    </view>
    <view class="image-botton-box">
      <image class="image-botton" src="https://img.qumoyugo.com/webimgbg/nurse_register_bg@2x.png" />
    </view>
  </view>
</template>
<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { storage } from '@/utils/utils'
import { useStore } from '@/store'
import { TOKEN, VERIFY_CODE } from '@/assets/js/config.js'
const store = useStore()
const { $https } = getCurrentInstance().appContext.config.globalProperties
// 页面登陆数据
const loginData = ref({
  phone: '',
  code: ''
})
// 倒计时timer
const timer = ref(null)
// 是否已经获取验证码 true 否 false 是
const getCoded = ref(false)
// 验证码倒计时
const countNum = ref(60)
// 获取验证码状态
const codeType = ref(VERIFY_CODE.START)
/**
 * 获取手机号显示文字
 */
const showText = computed(() => {
  if (codeType.value === VERIFY_CODE.START) {
    // 初始状态
    clearInterval(timer.value)
    return '获取'
  } else if (codeType.value === VERIFY_CODE.GETTING) {
    // 开始计时时候显示倒计时还剩下多少秒
    return `${countNum.value} 秒`
  } else {
    // 重新计时
    clearInterval(timer.value)
    return '重新获取'
  }
})
/**
 * 获取短信验证码
 */
const getCodeCheck = () => {
  // 判断是否可用点击获取菜单
  if (getCoded.value) return
  // 手机号校验正则
  const reg = /^1[3456789]\d{9}$/
  if (reg.test(loginData.value.phone)) {
    // 开始请求发送短信接口
    getSmsCode()
  } else {
    // 校验不通过给提示
    uni.showToast({
      title: '手机号格式错误',
      duration: 2000,
      icon: 'none'
    })
  }
}
/**
 * 获取验证码
 */
const getSmsCode = () => {
  // todo 这里发送获取验证码接口
  codeType.value = VERIFY_CODE.GETTING
  $https({
    url: '/sms/send',
    method: 'post',
    data: {
      phone: `86-${loginData.value.phone}`,
      scene: 'validate'
    },
    type: ''
  }).then(res => {
    if (res.code === 0) {
      uni.showToast({
        title: '验证码已发送',
        duration: 2000,
        icon: 'none'
      })
      // 获取按钮不可点击
      getCoded.value = true
      // 开始倒计时
      startCountdown()
    }
  })
}
/**
 * 开始倒计时
 */
const startCountdown = () => {
  timer.value = setInterval(() => {
    if (countNum.value <= 0) {
      // 如果60倒计时完，则再次重新计算
      codeType.value = VERIFY_CODE.AGAIN
      countNum.value = 60
      // 获取按钮可用再次点击
      getCoded.value = false
      clearInterval(timer.value)
    } else {
      // 每秒减一
      countNum.value--
    }
  }, 1000)
}
/**
 * 登陆前检查
 */
const loginCheck = () => {
  if (!getCoded.value) {
    // 校验不通过给提示
    uni.showToast({
      title: '请获取验证码',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  // 4位数字验证码校验
  const regex = /^\d{4}$/
  if (regex.test(loginData.value.code)) {
    loginMethod()
  } else {
    // 校验不通过给提示
    uni.showToast({
      title: '验证码输入错误',
      duration: 2000,
      icon: 'none'
    })
  }
}
/**
 * 登陆方法
 */
const loginMethod = () => {
  $https({
    url: '/auth/login',
    method: 'POST',
    type: '',
    data: {
      account: loginData.value.phone,
      code: loginData.value.code
    }
  }).then(res => {
    if (res.code === 0) {
      store.commit('setToken', res.data.token)
      storage.set(TOKEN, res.data.token)
      // todo 登陆成功，然后再获得用户信息，最后跳转不同的页面
      $https({
        url: '/auth/profile',
        type: '',
        data: {
          currServicerId: res.data.servicerId
        }
      }).then(profile => {
        if (profile.code === 0) {
          store.commit('setProfile', profile.data)
          uni.setStorageSync('setProfile', profile.data)
          // 返回数据中profile.data.type (类型0-活动核销员，1-洗护师)
          uni.switchTab({
            url: 'home/index'
          })
        }
      })
    } else {
      if (res.msg) {
        uni.showToast({
          title: res.msg,
          duration: 2000,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '验证码输入错误',
          duration: 2000,
          icon: 'none'
        })
      }
    }
  })
}
</script>

<style>
body {
  overflow: hidden;
}
.logo {
  margin-top: 34rpx;
  margin-left: 268.06rpx;
  width: 213.19rpx;
  height: 53.47rpx;
}
.login-title {
  margin-top: 40rpx;
  margin-left: 70.83rpx;
  font-size: 49rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.login-dash {
  margin-left: 97.22rpx;
  width: 45rpx;
  height: 7rpx;
  background: #525fa2;
}
.login-phone-title {
  margin-left: 70.83rpx;
  margin-top: 140rpx;
  width: 146rpx;
  height: 33rpx;
  font-size: 35rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-phone {
  max-width: 220rpx;
  margin-left: 70rpx;
  margin-top: 60rpx;
  font-size: 31rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 14rpx;
}
.input-phone-code {
  max-width: 220rpx;
  margin-left: 70rpx;
  margin-top: 60rpx;
  font-size: 31rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ee751e;
  line-height: 14rpx;
}
.input-phone::placeholder {
  letter-spacing: 6rpx;
  margin-left: 70rpx;
  margin-top: 60rpx;
  font-size: 31rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14rpx;
}
.input-get-code {
  margin-top: 60rpx;
  margin-right: 70rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #525fa2;
  line-height: 14rpx;
}
.input-get-coded {
  margin-top: 60rpx;
  margin-right: 70rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14rpx;
}
.input-line {
  margin-top: 41rpx;
  background: #999999;
  margin-left: 71rpx;
  margin-right: 71rpx;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #ccc;
  border-bottom: 1px solid #ccc;
}
.login-code-title {
  margin-left: 70.83rpx;
  margin-top: 100rpx;
  width: 146rpx;
  height: 33rpx;
  font-size: 35rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.btn {
  margin-top: 60rpx;
}
.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 444rpx;
  height: 90rpx;
  background: #525fa2;
  border-radius: 45rpx;
}
.text {
  font-size: 32rpx;
  font-family: PingFang SC;
  color: #ffffff;
}
.image-botton-box {
  width: 100%;
  text-align: center;
  margin-top: 110rpx;
}
.image-botton {
  margin: 0 auto;
  width: 515.28rpx;
  height: 363.19rpx;
}
.desc {
  /* text-indent: 40rpx; */
}
.flex-pc {
  display: flex;
  justify-content: center;
}
</style>
